<script setup>
import { ref } from 'vue';

// 定义属性 只读
// let props = defineProps(['money', 'books']);
let props = defineProps({
  money: {
    type: Number,
    required: true,
    default: 100
  },
  books: Array
});

// 子传父(子组件使用emit定义事件, 父组件使用@buy="moneyMinus感知事件并接收事件传递过来的值)
let emits = defineEmits(['buy']);

function buy() {
  emits('buy', -5);
}

const user = ref({
  name: "miranda",
  age: 18
});
</script>

<template>
<div style="background-color: green">
  <h3>Son</h3>
  <div>账户余额: {{props.money}}</div>
  <div>
    图书: <span v-for="book in props.books">【{{book}}】</span>
  </div>
  <button @click="buy">买棒棒糖</button>
</div>
<div style="background-color: red">
  <h3>插槽</h3>
  <div>
    <!-- 默认插槽 -->
    <!-- <slot><button>左边</button></slot> -->

    <!-- 具名插槽 -->
    <slot name="center"><button>中间</button></slot>
    <slot name="right"><button>右边</button></slot>

    <!-- 作用域插槽 -->
    <!-- 允许子组件向父组件传递数据, 父组件可以使用这些数据来渲染插槽内容 -->
    <slot :user="user"></slot>
  </div>
</div>
</template>

<style scoped>

</style>
